<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>36-Add-Cart</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
   <br><br><br>
    <!-- wrapper -->
<div class="wrapper">
     <h1>ON OFFER</h1>
 <span><i class="shopping-cart"></i></span>

    <div class="clear"></div>
    <!-- items -->
    <div class="items">
        <!-- single item -->
        <div class="item">
            <img src="img/one.jpg" alt="item" />
            <br>
            <h2>ITEM 1</h2>
            <p>PRICE: $449</p>

            <button class="add-to-cart" type="button">Add to cart</button>
        </div>
        <!--/ single item -->
        <!-- single item -->
        <div class="item">
            <img src="img/two.jpg" alt="item" />
            <br>
            <h2>ITEM 1</h2>
            <p>PRICE: $449</p>

            <button class="add-to-cart" type="button">Add to cart</button>
        </div>
        <!--/ single item -->
        <!-- single item -->
        <div class="item">
            <img src="img/three.jpg" alt="item" />
            <br>
            <h2>ITEM 1</h2>

            <p>PRICE: $449</p>
            
            <button class="add-to-cart" type="button">Add to cart</button>
            
        </div>
        <!--/ single item -->
    </div>
    <!--/ items -->
</div>
<!--/ wrapper -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>